import { Tabs, WhiteSpace } from "antd-mobile";
const tabs2 = [
    { title: "First Tab", sub: "1" },
    { title: "Second Tab", sub: "2" },
    { title: "Third Tab", sub: "3" },
];

const TabExample = () => (
    <div>
        <WhiteSpace />
        <Tabs
            tabs={tabs2}
            initialPage={1}
            tabBarPosition="bottom"
            renderTab={(tab) => <span>{tab.title}</span>}
        >
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    height: "150px",
                    backgroundColor: "#fff",
                }}
            >
                Content of first tab
            </div>
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    height: "150px",
                    backgroundColor: "#fff",
                }}
            >
                Content of second tab
            </div>
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    height: "150px",
                    backgroundColor: "#fff",
                }}
            >
                Content of third tab
            </div>
        </Tabs>
        <WhiteSpace />
    </div>
);

export default TabExample;
